<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换测试</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            transition: background 0.3s ease;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .theme-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .theme-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            color: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .theme-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        
        .theme-btn.pink {
            background: linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%);
        }
        
        .theme-btn.blue {
            background: linear-gradient(135deg, #4682B4 0%, #87CEEB 50%, #B0E0E6 100%);
        }
        
        .theme-btn.purple {
            background: linear-gradient(135deg, #9370DB 0%, #DDA0DD 50%, #E6E6FA 100%);
        }
        
        .demo-section {
            margin: 20px 0;
            padding: 20px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
        }
        
        .demo-button {
            padding: 12px 24px;
            border: none;
            border-radius: 20px;
            margin: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .demo-button:hover {
            transform: translateY(-2px);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            transition: color 0.3s ease;
        }
        
        h2 {
            margin-bottom: 15px;
            transition: color 0.3s ease;
        }
        
        .current-theme {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0;
            padding: 15px;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        
        /* 主题样式 */
        body.pink-theme {
            background: linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%);
        }
        
        body.pink-theme h1, body.pink-theme h2 {
            color: #FF69B4;
        }
        
        body.pink-theme .current-theme {
            background: rgba(255, 154, 205, 0.1);
            color: #FF69B4;
            border: 2px solid rgba(255, 154, 205, 0.3);
        }
        
        body.pink-theme .container {
            box-shadow: 0 20px 60px rgba(255, 182, 193, 0.3);
        }
        
        body.blue-theme {
            background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #F5FAFF 100%);
        }
        
        body.blue-theme h1, body.blue-theme h2 {
            color: #4682B4;
        }
        
        body.blue-theme .current-theme {
            background: rgba(70, 130, 180, 0.1);
            color: #4682B4;
            border: 2px solid rgba(70, 130, 180, 0.3);
        }
        
        body.blue-theme .container {
            box-shadow: 0 20px 60px rgba(70, 130, 180, 0.3);
        }
        
        body.purple-theme {
            background: linear-gradient(135deg, #F8F4FF 0%, #F3E5FF 50%, #FAF7FF 100%);
        }
        
        body.purple-theme h1, body.purple-theme h2 {
            color: #9370DB;
        }
        
        body.purple-theme .current-theme {
            background: rgba(147, 112, 219, 0.1);
            color: #9370DB;
            border: 2px solid rgba(147, 112, 219, 0.3);
        }
        
        body.purple-theme .container {
            box-shadow: 0 20px 60px rgba(147, 112, 219, 0.3);
        }
        
        .demo-button.primary.pink {
            background: linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%);
            color: white;
        }
        
        .demo-button.primary.blue {
            background: linear-gradient(135deg, #4682B4 0%, #87CEEB 50%, #B0E0E6 100%);
            color: white;
        }
        
        .demo-button.primary.purple {
            background: linear-gradient(135deg, #9370DB 0%, #DDA0DD 50%, #E6E6FA 100%);
            color: white;
        }
        
        .demo-select {
            padding: 10px 15px;
            border: 2px solid #ddd;
            border-radius: 20px;
            background: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .demo-select:focus {
            outline: none;
            border-color: #FF9ACD;
            box-shadow: 0 0 0 3px rgba(255, 154, 205, 0.1);
        }
        
        body.blue-theme .demo-select:focus {
            border-color: #4682B4;
            box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.1);
        }
        
        body.purple-theme .demo-select:focus {
            border-color: #9370DB;
            box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.1);
        }
    </style>
</head>
<body class="pink-theme">
    <div class="container">
        <h1>🌸 Nikki UI 主题切换测试</h1>
        
        <div class="theme-selector">
            <button class="theme-btn pink" onclick="setTheme('pink')">🌸 梦幻粉色</button>
            <button class="theme-btn blue" onclick="setTheme('blue')">💎 梦幻蓝色</button>
            <button class="theme-btn purple" onclick="setTheme('purple')">💜 梦幻紫色</button>
        </div>
        
        <div class="current-theme" id="theme-info">
            当前主题：🌸 梦幻粉色
        </div>
        
        <div class="demo-section">
            <h2>按钮组件演示</h2>
            <div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;">
                <button class="demo-button primary pink">主要按钮</button>
                <button class="demo-button primary blue">主要按钮</button>
                <button class="demo-button primary purple">主要按钮</button>
            </div>
        </div>
        
        <div class="demo-section">
            <h2>选择器组件演示</h2>
            <div style="text-align: center;">
                <select class="demo-select" id="demo-select" onchange="handleSelectChange(this)">
                    <option value="">请选择主题</option>
                    <option value="pink">🌸 梦幻粉色</option>
                    <option value="blue">💎 梦幻蓝色</option>
                    <option value="purple">💜 梦幻紫色</option>
                </select>
                <div style="margin-top: 15px; color: #666;">
                    选择的主题：<span id="selected-theme">未选择</span>
                </div>
            </div>
        </div>
        
        <div class="demo-section">
            <h2>主题信息</h2>
            <div id="theme-details">
                <p><strong>主题名称：</strong>梦幻粉色</p>
                <p><strong>主色调：</strong>#FF9ACD</p>
                <p><strong>适用场景：</strong>温暖、可爱、女性化设计</p>
            </div>
        </div>
    </div>

    <script>
        const themeData = {
            pink: {
                name: '梦幻粉色',
                icon: '🌸',
                color: '#FF9ACD',
                description: '温暖、可爱、女性化设计'
            },
            blue: {
                name: '梦幻蓝色',
                icon: '💎',
                color: '#4682B4',
                description: '清新、优雅、科技感设计'
            },
            purple: {
                name: '梦幻紫色',
                icon: '💜',
                color: '#9370DB',
                description: '神秘、高贵、创意设计'
            }
        };

        let currentTheme = 'pink';

        function setTheme(themeName) {
            // 移除所有主题类
            document.body.classList.remove('pink-theme', 'blue-theme', 'purple-theme');
            
            // 添加新主题类
            document.body.classList.add(`${themeName}-theme`);
            
            // 更新当前主题
            currentTheme = themeName;
            
            // 更新UI显示
            const theme = themeData[themeName];
            document.getElementById('theme-info').textContent = `当前主题：${theme.icon} ${theme.name}`;
            document.getElementById('demo-select').value = themeName;
            document.getElementById('selected-theme').textContent = theme.name;
            
            // 更新主题详情
            document.getElementById('theme-details').innerHTML = `
                <p><strong>主题名称：</strong>${theme.name}</p>
                <p><strong>主色调：</strong>${theme.color}</p>
                <p><strong>适用场景：</strong>${theme.description}</p>
            `;
            
            // 更新所有按钮的主题类
            document.querySelectorAll('.demo-button.primary').forEach(btn => {
                btn.classList.remove('pink', 'blue', 'purple');
                btn.classList.add(themeName);
            });
            
            console.log(`主题已切换到：${theme.name}`);
        }

        function handleSelectChange(select) {
            if (select.value) {
                setTheme(select.value);
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            setTheme('pink');
        });
    </script>
</body>
</html>